<script lang="ts" setup>
defineOptions({
  name: "ArticleDetailItem",
});
let props = defineProps({
  content: {
    type: [String, Number],
  },
  item: {
    type: [Object],
    default: () => ({}),
  },
});
let emit = defineEmits(["update:content", "update:item"]);
let content = useRefModel(props, "content", emit);
let item = useRefModel(props, "item", emit);
import { ads_ids, DOMAINS } from "@/config/ads_ids";
import { classNameArticleDetailItem } from "@/config/const_var";
import dayjs from "@/utils/dayjs";

let currentTimeZone = dayjs.tz.guess();
let timeStamp = item.value.date * 1000;
if (isEmptyType(timeStamp)) {
  timeStamp = Date.now();
}
let date = dayjs(timeStamp).tz(currentTimeZone).format("YYYY-MM-DD HH:mm");
console.log(date);
let contentHtml =
  content.value +
  `<div
    class="comment-area"
    id="_boyuanComment"
    data-id="${item.value.id}"
    data-channel="obnews"
    style="margin-top: 30px"
  ></div>`;
onMounted(() => {
  // @ts-ignore
  let loadCommentData = window.loadCommentData;
  loadCommentData && loadCommentData(false);
});

let ads_id_320_250 = ref<any>(0);
let hostname = location.hostname;
if (DOMAINS.includes(hostname)) {
  ads_id_320_250.value = ads_ids[hostname]["list_index"]["ads_ids_320_250"][0];
} else {
  ads_id_320_250.value = ads_ids["default_list_index_id"];
}
</script>
<template>
  <div :class="classNameArticleDetailItem">
    <div class="title">{{ item.title }}</div>
    <div class="author-info">
      <div class="name">{{ item.name }}</div>
      <div class="time">
        {{ date }} ·
        {{ item.time }}
      </div>
    </div>
    <Advert
      v-if="DOMAINS.includes(hostname)"
      ads_type="0"
      style="height: 250px !important"
      v-model:ads_id="ads_id_320_250"
    />
    <div class="content" v-html="contentHtml"></div>
    <Advert
      v-if="DOMAINS.includes(hostname)"
      ads_type="0"
      style="height: 250px !important"
      v-model:ads_id="ads_id_320_250"
    />
    <HomeDragUp class="pl-16 pr-16 pt-16" />
  </div>
</template>
<style lang="scss" scoped>
.#{$scss-classNameArticleDetailItem} {
  .title {
    font-weight: 800;
    font-size: 16px;
    color: #444444;
  }
  .author-info {
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 8px;
    .name {
      color: #333;
      font-size: 16px;
    }
    .time {
      color: #999;
    }
  }
  .content {
    color: #666666;
  }
}
</style>
